<template>
<div>
<!--  读取参数，原因是index.js中写的是:id-->
  <p>ID : {{$route.params.id}}</p>
  <ul>
    <li>id: {{messageDetail.id}}</li>
    <li>title: {{messageDetail.title}}</li>
    <li>content: {{messageDetail.content}}</li>
  </ul>
</div>
</template>

<script>


export default {
  name: "MessageDetail",
  data(){
    return{
      messageDetail:{}
    }
  },
  mounted() {
    setTimeout(()=>{
      const allMessageDetails = [
        {id:1,title:'message001',content:'message001 content...'},
        {id:2,title:'message002',content:'message002 content...'},
        {id:3,title:'message003',content:'message003 content...'},
        {id:4,title:'message004',content:'message004 content...'},
      ];
      this.allMessageDetails = allMessageDetails;
      /*转化文本*/
      const id = this.$route.params.id * 1
      /*数组取值*/
      this.messageDetail = allMessageDetails.find(detail => detail.id === id)
    },1000)
  },
  /*监视*/
  watch:{ /*监视路由路径发生了改变*/
    $route:function (value) {
      /*转化文本*/
      const id = value.params.id * 1
      /*数组取值*/
      this.messageDetail = this.allMessageDetails.find(detail => detail.id === id)
    }
  }
}
</script>

<style scoped>

</style>
